<template>
	<div style=" width: 100%;height: 500px;">
		<div style="width: 10%;height: 89vh;background: red;float: left;">
			<div style="width: 150px; height: 100%; background: red; float: left;">
				<Menu active-name="1" style="width: 150px;height:89vh">
					<MenuGroup title="文件类型">
						<MenuItem name="1" @click.native="qbwj">
						<Icon type="ios-folder" />全部类型
						</MenuItem>
						<MenuItem name="2" @click.native="jpg">
						<Icon type="md-images" />图片
						</MenuItem>
						<MenuItem name="3" @click.native="mp4">
						<Icon type="logo-youtube" />视频
						</MenuItem>
						<MenuItem name="4" @click.native="mp3">
						<Icon type="ios-mic" />音乐
						</MenuItem>
						<MenuItem name="5" @click.native="doc">
						<Icon type="md-document" />文档
						</MenuItem>
					</MenuGroup>
					<MenuGroup title="数据传输">
						<MenuItem name="8">
						<Icon type="ios-cloud-upload" />上传管理
						</MenuItem>
						<MenuItem name="9">
						<Icon type="md-cloud-download" />下载管理
						</MenuItem>
					</MenuGroup>
				</Menu>
			</div>
		</div>
		<div style="width: 90%;height: 89vh;padding-left: 20px;overflow-y:auto;">
			<div style="height: 40px;display: flex;justify-content:space-between;">
				<Row type="flex" justify="start" class="code-row-bg" style="float: left;padding-right: 5px; height: 40px;line-height: 60px;">
					<div style="float:left; margin-left:10px; line-height: 40px;">
						<Button size="small" icon="ios-cloud-upload" @click="Upload">上传</Button>
						<Button size="small" icon="ios-add-circle" @click="NewFolder = true">新建</Button>
						<Modal title="新建文件夹" v-model="NewFolder" @on-ok="YesFolder" @on-cancel="NoFolder">
							<Input v-model="FolderValue" placeholder="请输入新建文件夹的名称……" style="width: 100%;" />
						</Modal>
					</div>
					<div style="margin-left:5px; line-height: 40px;">

						<ButtonGroup>
							<Button size="small" v-show="button" icon="md-trash">删除</Button>
							<Button size="small" v-show="button" icon="md-cloud-download" >下载</Button>
							<Button size="small" v-show="button" icon="ios-copy">复制到</Button>
							<Button size="small" v-show="button" icon="ios-albums">移动到</Button>
						</ButtonGroup>
					</div>
				</Row>
				<div style="">
					<Input search placeholder="搜索" size="small" style="margin-top: 12px; width: auto; float: right; margin-right: 10px;" />
				</div>
			</div>
			<div style="width: 100%;height: 30px;padding-left: 10px;">
				<Breadcrumb>
					<a @click="Back">
						<Icon type="ios-arrow-back" size="20" />
					</a>
					<a @click="shuaxin">
						<Icon type="md-refresh" size="20" />
					</a>
					<a style="color: #3f3f3f;" @click="aaaaa(index)" v-for="(item,index) in path">
						<BreadcrumbItem>
							<Icon type="ios-home-outline" size="20"></Icon>
							{{item}}
						</BreadcrumbItem>
					</a>
				</Breadcrumb>
			</div>
			<Table :columns="columns1" :data="arr" size="small" @on-selection-change="select" @on-row-dblclick="dbClick"
			 show-context-menu @on-contextmenu="handleContextMenu">
				<template slot="contextMenu">
					<DropdownItem @click="Download">下载</DropdownItem>
					<DropdownItem @click.native="NewFile = true">重命名</DropdownItem>
					<Modal title="重命名" v-model="NewFile" @on-ok="YesFile" @on-cancel="NoFile">
						<Input v-model="FileValue" placeholder="请输入重命名的名称……" style="width: 100%;" />
					</Modal>
					<DropdownItem v-if="Copy == true">复制</DropdownItem>
					<DropdownItem v-else>粘贴</DropdownItem>
					<DropdownItem style="color: #ed4014" @click.native="handleContextMenuDelete">删除</DropdownItem>
				</template>
			</Table>
			<iframe src="https://www.weiyun.com/" id="iframe2" scrolling="no" frameborder="0" style="position:absolute; width:0px;  height:0px;"></iframe>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				columns1: [{
						type: "selection",
						width: 60,
						align: "center"
					},
					{
						title: "文件名",
						key: "tit"
					},
					{
						title: "文件夹大小",
						key: "size",
						width: 200
					}
				],
				button: false,
				Copy: false,
				arr: [],
				ContextMenu: [],
				NewFolder: false, //新建文件夹弹窗
				NewFile:false,//重命名弹窗
				FolderValue: "", //新建文件夹value
				FileValue:"",//重命名value
				path:[]
			};
		},
		mounted() {
			window.sessionStorage.setItem('Weiyun_scale','1')
			setInterval(() => {
				this.asd();


			}, 1000);

			this.$Spin.show();
			setTimeout(() => {
				this.$Spin.hide();
			}, 3000);
		},
		methods: {
			select(Selection) {
				//对选中的数据 显示按钮，执行操作

				//将选中的数据，存储到数组里面，以便使用
				//   this.Selection = Selection;

				if (Selection.length != 0) {
					this.button = true;
				} else {
					this.button = false;
				}

				console.log(Selection);
			},
			// 新建文件夹确定
			YesFolder() {

				var value = this.FolderValue
				console.log(value)
				var iframe2 = document.getElementById("iframe2");
				var newfbtn = iframe2.contentWindow.document.querySelector(
					".mod-action-wrap .action-item .action-item-con .mod-bubble-menu .menu-item .menu-item-bd .menu-list .menu-item .txt"
				);
				newfbtn.click();
				setTimeout((res) => {
					var list = iframe2.contentWindow.document.body.getElementsByClassName("list-group");
					if (list.length > 2) {
						var filelist = list[2];
						var tmp = filelist.children[0];
						var input = iframe2.contentWindow.document.getElementsByClassName('ui-input')[0]
						input.value = value
						input._value = value
						input.blur();
							 input.offsetParent.offsetParent.children[0].children[0].click();
						this.arr=[];//让重新读取
						var _this=this;
						setTimeout((res) => {
	_this.$Message.success("新建文件夹：" + value);
						_this.asd()		},1000)
					}
				}, 1000)



			},
			// 新建文件夹取消
			NoFolder() {
				this.$Message.warning("已取消新建文件夹！");
			},
			// 重命名文件夹确定
			YesFile(){
				var iframe2 = document.getElementById("iframe2");
				var value = this.FileValue
				 var file = iframe2.contentWindow.document.getElementsByClassName('list-group')[2].children[3].click()  //选择文件
				 var click = iframe2.contentWindow.document.getElementsByClassName('mod-action-wrap mod-action-wrap-menu clearfix')[0].children[3].children[1].children[0].children[2].click() //点击上方菜单删除按钮
				setTimeout((res) => {
					var input = iframe2.contentWindow.document.getElementsByClassName('ui-input')[0]
							input.value = value
							input._value= value
							var bb = 0;
				}, 1000)
				setTimeout((res) => {
					var list = iframe2.contentWindow.document.body.getElementsByClassName("list-group");
					if (list.length > 2) {
						var filelist = list[2];
						var tmp = filelist.children[0];
						var input = iframe2.contentWindow.document.getElementsByClassName('ui-input')[0]
						input.value = value
						input._value = value
						input.blur();
							 input.offsetParent.offsetParent.children[0].children[0].click();
						this.arr=[];//让重新读取
						var _this=this;
						setTimeout((res) => {
	_this.$Message.success("重命名文件夹：" + value);
						_this.asd()		},1000)
					}
				}, 1000)

			},
			// 重命名取消
			NoFile() {
				this.$Message.warning("已取消新建文件夹！");
			},
			// 双击事件
			dbClick(row) {
				console.log(row)
				if(row.tit == '《酷猫云盘管理器》项目-测试报告.docx'){
					window.open('https://doc.weiyun.com/33156a66a4138ded959d0c91ee56a71c')
					return
				}

				if(row.tit == '《酷猫云盘管理器》项目-用户手册.docx'){
					window.open('https://doc.weiyun.com/61e76b9610bcd851dbd6686fe16ca7b6')
					return
				}


				this.path.splice(this.path.length, 0, row.tit);
				var iframe = iframe2.contentWindow.document.getElementsByClassName('item-tit')[1].children[2].children[0].click() //进入

				setTimeout(() => {
					var list = iframe2.contentWindow.document.body.getElementsByClassName(
						"list-group"
					);

					var data = [];
						var filelist = list[2];

						for (var i = 0; i < filelist.children.length; i++) {
							var tmp = filelist.children[i];
							var tit = tmp.getElementsByClassName("tit")[0].innerHTML; //文件名
							var time = tmp.getElementsByClassName("txt-time")[0].innerHTML; //修改时间
							var size = tmp.getElementsByClassName("txt-size")[0].innerHTML; //大小
							var type = tmp.getElementsByClassName("thumb")[0].innerHTML; //大小
							if (tit.indexOf(".") == -1) {
								if (type.indexOf("file") > -1) {
									type = "file"; //文件夹
								} else {
									type = "no"; //无后缀文件
								}
							} else {
								type = tit.substr(tit.indexOf("."), tit.length - tit.indexOf("."));
							}
							data.push({
								tit: tit,
								time: time,
								size: size,
								type: type
							});
						}
					console.log(data);
					var _this = this
					_this.arr = data;
				}, 1000);
			},

			// 右键点击事件
			handleContextMenu(row) {
				this.ContextMenu = row;
				this.FileValue = row.server_filename;
			},
			// 右键菜单下载文件
			Download() {
				var iframe = this.iframe2.contentWindow.document.getElementsByClassName('list-group')[2].children[3].click() //选择文件
				var click = this.iframe2.contentWindow.document.getElementsByClassName('mod-action-wrap mod-action-wrap-menu clearfix')[0].children[0].click()
				setTimeout((res) => {
					var DownloadUrl = this.iframe2.contentWindow.document.body.children[8].children[0].src
					alert(DownloadUrl)
				}, 2000)
			},
			// 右键菜单删除
			handleContextMenuDelete(){

				var iframe = iframe2.contentWindow.document.getElementsByClassName('list-group')[2].children[0].click()  //选择文件
				var click = iframe2.contentWindow.document.getElementsByClassName('mod-action-wrap mod-action-wrap-menu clearfix')[0].children[2].click() //点击上方菜单删除按钮

				setTimeout(() => {
					var button = iframe2.contentWindow.document.getElementsByClassName('btn btn-active')[0].click()   //0 = i 确定删除
					this.arr=[];//让重新读取
					var _this=this;
					setTimeout((res) => {
_this.$Message.success("删除成功！" );
					_this.asd()		},1000)

				}, 800);
			},
			//获取文件信息
			asd() {
				var arr = this.arr;
				if (arr == undefined || arr.length <= 0) {
					var iframe2 = document.getElementById("iframe2");
					var list = iframe2.contentWindow.document.body.getElementsByClassName(
						"list-group"
					);
					// var tc=iframe2.contentWindow.document.getElementById("_layout_main").children[2].children[1].children[0].children[0].children[1];
					var data = [];
					if (list.length > 2) {
						var filelist = list[2];

						for (var i = 0; i < filelist.children.length; i++) {
							var tmp = filelist.children[i];
							var tit = tmp.getElementsByClassName("tit")[0].innerHTML; //文件名
							var time = tmp.getElementsByClassName("txt-time")[0].innerHTML; //修改时间
							var size = tmp.getElementsByClassName("txt-size")[0].innerHTML; //大小
							var type = tmp.getElementsByClassName("thumb")[0].innerHTML; //大小
							var qqq = tmp.getElementsByClassName("tit")[0]; //文件名
							var ccc = i
							var bbb = 0;
							if (tit.indexOf(".") == -1) {
								if (type.indexOf("file") > -1) {
									type = "file"; //文件夹
								} else {
									type = "no"; //无后缀文件
								}
							} else {
								type = tit.substr(
									tit.indexOf("."),
									tit.length - tit.indexOf(".")
								);
							}
							data.push({
								tit: tit,
								time: time,
								size: size,
								type: type,
								f: tmp.getElementsByClassName("tit")[0]
							});
						}
					}
					console.log(data);
					this.arr = data;
				}
			},
			aaa() {
				var iframe2 = document.getElementById("iframe2");
				var list = iframe2.contentWindow.document.body.getElementsByClassName(
					"list-group"
				);
				// var tc=iframe2.contentWindow.document.getElementById("_layout_main").children[2].children[1].children[0].children[0].children[1];
				var data = [];
				if (list.length > 2) {
					var filelist = list[2];

					for (var i = 0; i < filelist.children.length; i++) {
						var tmp = filelist.children[i];
						var tit = tmp.getElementsByClassName("tit")[0].innerHTML; //文件名
						var time = tmp.getElementsByClassName("txt-time")[0].innerHTML; //修改时间
						var size = tmp.getElementsByClassName("txt-size")[0].innerHTML; //大小
						var type = tmp.getElementsByClassName("thumb")[0].innerHTML; //大小
						if (tit.indexOf(".") == -1) {
							if (type.indexOf("file") > -1) {
								type = "file"; //文件夹
							} else {
								type = "no"; //无后缀文件
							}
						} else {
							type = tit.substr(tit.indexOf("."), tit.length - tit.indexOf("."));
						}
						data.push({
							tit: tit,
							time: time,
							size: size,
							type: type
						});
					}
				}
				console.log(data);
				this.arr = data;
			},
			qbwj() {
				var aaa = iframe2.contentWindow.document
					.getElementsByClassName("mod-menu")[0]
					.children[1].children[0].children[0].children[0].children[0].click();
				setTimeout(() => {
					this.aaa();
				}, 1000);
			},

			doc() {
				var aaa = iframe2.contentWindow.document
					.getElementsByClassName("mod-menu")[0]
					.children[1].children[0].children[0].children[1].children[0].click();

				setTimeout(() => {
					this.aaa();
				}, 1000);
			},
			jpg() {
				var aaa = iframe2.contentWindow.document
					.getElementsByClassName("mod-menu")[0]
					.children[1].children[0].children[0].children[2].children[0].click();
				setTimeout(() => {
					this.aaa();
				}, 1000);

				console.log(aaa);
			},
			mp4() {
				var aaa = iframe2.contentWindow.document
					.getElementsByClassName("mod-menu")[0]
					.children[1].children[0].children[0].children[3].children[0].click();
				setTimeout(() => {
					this.aaa();
				}, 1000);
			},
			mp3() {
				var aaa = iframe2.contentWindow.document
					.getElementsByClassName("mod-menu")[0]
					.children[1].children[0].children[0].children[4].children[0].click();
				setTimeout(() => {
					this.aaa();
				}, 1000);
			},
			Upload() {
				var iframe2 = document.getElementById("iframe2");
				var aaa = iframe2.contentWindow.document.body
					.getElementsByClassName("action-item-con")[0]
					.children[2].children[0].children[0].click();
			},
			aaaaa(row, index) {
			  // 获取点击的名字
			  var name = this.path[row];
			  // 将数组转换字符串
			  var Clickpath = this.path.join("/");
			  // 截取到点击的路径
			  var path = Clickpath.substring(
			    0,
			    Clickpath.lastIndexOf(name) + name.length
			  );
			  // 将路径转换成数组
			  this.path = path.split("/");
			  this.Refresh();
			},
			Back(){
				var iframe = iframe2.contentWindow.document.getElementsByClassName('breadcrumb clearfix')[0].children[0].click() //进入

				setTimeout(() => {
					var list = iframe2.contentWindow.document.body.getElementsByClassName(
						"list-group"
					);

					var data = [];
						var filelist = list[2];

						for (var i = 0; i < filelist.children.length; i++) {
							var tmp = filelist.children[i];
							var tit = tmp.getElementsByClassName("tit")[0].innerHTML; //文件名
							var time = tmp.getElementsByClassName("txt-time")[0].innerHTML; //修改时间
							var size = tmp.getElementsByClassName("txt-size")[0].innerHTML; //大小
							var type = tmp.getElementsByClassName("thumb")[0].innerHTML; //大小
							if (tit.indexOf(".") == -1) {
								if (type.indexOf("file") > -1) {
									type = "file"; //文件夹
								} else {
									type = "no"; //无后缀文件
								}
							} else {
								type = tit.substr(tit.indexOf("."), tit.length - tit.indexOf("."));
							}
							data.push({
								tit: tit,
								time: time,
								size: size,
								type: type
							});
						}
					console.log(data);
					var _this = this
					_this.arr = data;
				}, 1000);

					//判断是否为根目录
					if (this.path.length == 0) {

					}
					//当前目录-1
					this.path.splice(-1, 1);

			},
			shuaxin(){
			this.arr=[];//让重新读取
			var _this=this;
			setTimeout((res) => {
_this.$Message.success("刷新目录成功！");
			_this.asd()		},1000)
			}
		}
	};
</script>




<style>
	.demo-spin-icon-load {
		animation: ani-demo-spin 1s linear infinite;
	}

	@keyframes ani-demo-spin {
		from {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(180deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.demo-spin-col {
		height: 100px;
		position: relative;
		border: 1px solid #eee;
	}
</style>
